<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>

</head>
<body style="padding: 25px 25px;">
<div id="app"  >
    <div>
        <el-form ref="form"  label-width="120px" size="mini" >

            <el-form-item label="年度">
                <el-select v-model="form.nd" placeholder="请选择年度">
                    <el-option v-for="(item,index) in nd"  :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="月份">
                <el-select v-model="form.yf" placeholder="请选择月份">
                    <el-option v-for="(item,index) in yf"  :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="进度" style="width: 70%;">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="proInfo.pro"></el-progress>
                <div>{{proInfo.msg}}</div>
            </el-form-item>


        </el-form>
    </div>
</div>
</body>
<script>
    Vue.use(httpVueLoader);

    var vm = new Vue({
        el:"#app",
        data:{
            form:{nd:"",yf:""},
            nd:[],
            yf:["01","02","03","04","05","06","07","08","09","10","11","12"],
            proInfo:{msg:"",pro:0},
        },
        created(){
            this.ndcreate();
        },
        methods:{
            ndcreate(){
                for(let a=1993;a<=2030;a++){
                    this.nd.push(""+a);
                }
                let d1 = renderTime(new Date(),"yyyy-MM-dd");
                let d2 = d1.split("-");
                this.form["nd"] = d2[0];
                this.form["yf"] = d2[1];
            },
            //获取生成进度信息
            async getPorInfo(){
                const res = await postWebCustom(getTableId("2438"),{});
                this.proInfo = res.data;
                if(res.data.pro != 100){
                    this.getPorInfo();
                }
            },
            //生成发放数据
            async shengchenglaowufei(){
                const res = await postWebCustom(getTableId("2437"),{ssq:""+this.form.nd+""+this.form.yf});
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                this.getPorInfo();
            }
        }
    });
</script>
</html>